import Taro, { Component } from '@tarojs/taro'
import classNames from 'classnames'
import PropsType from 'prop-types'
import { View, Image } from '@tarojs/components'
import DButtonModal from '../buttonmodal/buttonmodal'
import '../styles/buttonlist.scss'

class DButtonList extends Component {

    constructor() {
        super(...arguments)
        this.state = {

        }
    }
    onItemHandel() {
        this.props.onItemHandel && this.props.onItemHandel(...arguments)
    }

    render() {
        const {
            className,
            list,
            btnStatus
        } = this.props
        return (
            <View className={classNames('b_button-list', className)}>
                <View className='b_buttonlist'>
                    <View className='b_buttonlist__box'>
                        {
                            list && list.map((item, i) => {
                                return <View className='b_buttonlist__box-item' onClick={this.onItemHandel.bind(this, i)}>
                                    {
                                        item.img && <Image src={item.img} className='b_buttonlist__box-img'></Image>
                                    }
                                    {
                                        item.text && <View className='b_buttonlist__box-text'>{item.text}</View>
                                    }
                                </View>
                            })
                        }
                    </View>
                    {
                        btnStatus && <DButtonModal {...this.props} className='b_buttonlist__btn'></DButtonModal>
                    }
                </View>
            </View>
        )
    }

}

DButtonList.defaultProps = {
    className: '',
    list: [
        {
            text: '示列1',
            img: require('../assete/icon_car.png')
        },
        {
            text: '示列2',
            img: require('../assete/icon_car.png')
        },
        {
            text: '示列3',
            img: require('../assete/icon_car.png')
        },
        {
            text: '示列4',
            img: require('../assete/icon_car.png')
        }
    ],
    btnStatus: true,
    text: '提交',
    title: '测试标题',
    cancelText: '取消',
    confirmText: '确认',
    content: '测试内容',
    defaultBtn: true,
    primanyBtn: true,
    cancelBtn: false,
    radius: 20
}

export default DButtonList